<template>
  <view class="certificate-search">
    <image src="@/static/home/image/certificateBanner.png" mode="widthFix" class="banner-img"></image>
    <view class="search-input">
      <up-search placeholder="请输入证书编号查询" actionText="" :clearabled="false" showAction="fasle" bgColor="#fff"
        inputAlign="center" height="96rpx" v-model="keyword"></up-search>
    </view>
    <view class="search-btn" @click="taskIndexAPi">点击查询</view>
  </view>
</template>

<script setup>
  import {
    taskIndex
  } from './api.js'
  import {
    ref
  } from 'vue'
  const keyword = ref('')

  const taskIndexAPi = (async (id) => {
    if (!keyword.value) {
      uni.showToast({
        title: "请输入证书编号",
        icon: 'none'
      })
      return
    }
    const res = await taskIndex({
      no: keyword.value
    })
    if (res && res.code === 1) {
      uni.navigateTo({
        url: `/pages/index/certificatePage/certificateAppraisal?id=${keyword.value}`
      })
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
</script>

<style lang="scss" scoped>
  .certificate-search {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .banner-img {
      width: 100%;

    }

    .search-input {
      width: 690rpx;
      height: 96rpx;
      border-radius: 48rpx;
      background: #FFFFFF;
      border: 2rpx solid #FFFFFF;
      transform: translateY(-50%);

      ::v-deep .u-search__action--active {
        width: 0;
      }
    }

    .search-btn {
      margin-top: 80rpx;
      width: 320rpx;
      height: 88rpx;
      border-radius: 44rpx;
      background: #A4682F;
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>